<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

<html>
<head>
    <script type="text/javascript" src="/voteup/resources/js/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="/voteup/resources/js/jquery-autocomplete/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="/voteup/resources/js/stylescript.js"></script>
    <script type="text/javascript" src="/voteup/resources/js/regscript.js"></script>
    <link rel="stylesheet" type="text/css"
          href="/voteup/resources/js/jquery-autocomplete/jquery.autocomplete.css"/>
    <title>Edit profile</title>
</head>
<body>
<c:import url="/WEB-INF/jsp/header.jsp"/>
<c:import url="/WEB-INF/jsp/menu.jsp"/>
<center><h3>Edit your profile</h3>
    <c:if test="${not empty msg}">
        <font size="2" color="red"> ${msg}
        </font>
    </c:if>
    <p><img src="/voteup/resources/img/avatars/${person.avatar}.jpg" alt="" width="120" height="160"
            border="0"></p>

    <form action="upload" method="POST" enctype="multipart/form-data">
        <input type="file" class="inputtext" name="data"> <br>
        <input type="submit" class="inputbutton" value="Change photo">
    </form>
    <form:form action="edit" method="POST" commandName="person">
        <table id="regtable" class="width" cellspacing="30">

            <tr>
                <td>
                    <form:errors path="lastName" cssClass="error"/>

                    <p>Lastname: <form:input cssClass="inputtext" path="lastName" maxlength="30"/></p>


                    <form:errors path="firstName" cssClass="error"/>

                    <p>Firstname: <form:input cssClass="inputtext" path="firstName" maxlength="30"/></p>


                    <form:errors path="middleName" cssClass="error"/>

                    <p>Middlename: <form:input cssClass="inputtext" path="middleName" maxlength="30"/></p>

                    </p>
                </td>
                <td align="center">
                    <p>Birthday:</p>
                    <form:errors path="bday" cssClass="error"/>

                    <p>Day: <form:input cssClass="inputtext" path="bday" maxlength="2" size="2"/></p>

                    <p>Month: <form:input cssClass="inputtext" path="bmonth" maxlength="2" size="2"/></p>

                    <p>Year: <form:input cssClass="inputtext" path="byear" maxlength="4" size="4"/></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>University: <form:select path="group.faculty.university.universityName" items="${universities}"
                                                id="university" cssClass="inputtext" size="1"
                                                onchange="setUnivername();"/>
                    </p>

                    <p>Faculty: <form:select path="group.faculty.facultyName" cssClass="inputtext" items="${faculties}"
                                             id="faculty" size="1"
                                             onchange="setFacultyname();"/>
                    </p>
                    <form:errors path="group.groupName" cssClass="error"/>

                    <p> Group: <form:input id="group" cssClass="inputtext" autocomplete="off" path="group.groupName"
                                           maxlength="30"/></p>
                </td>
                <td>
                    <c:if test="${not empty oldPassError}">
                        <font class="error"> ${oldPassError}
                        </font>
                    </c:if>

                    <p>Old password: <input type="password" class="inputtext" name="oldpassword" value=""
                                            maxlength="30"/></p>

                    <form:errors path="password" cssClass="error"/>

                    <p>New password: <form:password cssClass="inputtext" path="password" maxlength="30"/></p>

                    <c:if test="${not empty confirmError}">
                        <font class="error"> ${confirmError}
                        </font>
                    </c:if>
                    <p>Confirm password: <input type="password" class="inputtext" name="cpassword" value=""
                                                maxlength="30"></p>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type=submit class="inputbutton" value="Save changes"></td>
            </tr>
        </table>
    </form:form>
    <script type="text/javascript">
        setUnivername();
    </script>
</center>
</body>
</html>